/**
 * Created by Harvey Zhao on 16-8-27.
 */
import React from 'react'
import AutoComplete from 'material-ui/AutoComplete'
import RaisedButton from 'material-ui/RaisedButton'
import { Button, FormControl, FormGroup } from 'react-bootstrap';
import {Grid, Row, Col} from 'react-flexbox-grid'
import { Link, IndexLink } from 'react-router'
import { action_logout } from '../actions'
//import Auth from '../auth/auth'
export default class Header extends React.Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            dataSource: [],
        };
    }

    handleClick(e) {
        e.preventDefault();
        console.log(this.props);
        //this.props.out();
        this.props.dispatch(action_logout());
        //Auth.logout();
    }
    render() {
        const { isLogin, user } = this.props;
        return (
            <header className="text-center">
                <Grid>
                    <Row style={{ height: 100 }}>
                        <Col xs={6} md={6}>
                            <Row>
                                <FormGroup>
                                    <FormControl type="text" placeholder="请输入搜索关键字" />
                                </FormGroup>
                                <FormGroup>
                                    <Button  onClick={ e => this.handleClick(e) }>搜索</Button>
                                </FormGroup>
                            </Row>
                        </Col>
                        <Col xs={6} md={6} lg={6} sm={6}>
                            {user.username}
                        </Col>
                    </Row>
                </Grid>
                <div style={{ backgroundColor: "#005a99" }}>
                    <Grid style={{ height: 41 }}>
                        {((isLogin) => {
                            if (isLogin) {
                                return (
                                    <ul className="nc-nav nav nav-tabs">
                                        <li className="active"><IndexLink to="/" activeClassName="active">首页</IndexLink></li>
                                        <li><Link to="/qr" activeClassName="active">二维码生成</Link></li>
                                        <li> <a onClick={ e => this.handleClick(e) } href="#"> 注销 </a></li>
                                    </ul>
                                )
                            } else {
                                return (
                                    <ul className="nc-nav nav nav-tabs">
                                        <li className="active"><IndexLink to="/" activeClassName="active">首页</IndexLink></li>
                                        <li> <Link property="" to="/login"  activeClassName="active"> 登录 </Link> </li>
                                    </ul>
                                )
                            }
                        })(isLogin) }
                    </Grid>
                </div>
            </header >
        );
    }
}